<script setup>

    import { reactive } from 'vue'

    const user = reactive({
        username:"",
        agree:false,
        hobby:[],
        sex:"",
        degree:""
    })

</script>

<template>
    <div style="display: flex;">
        <div style="border: 1px solid black;width: 300px">
            <form>
                <h1>表单绑定</h1>
                <p style="background-color: azure">
                    <label>姓名(文本框)：</label>
                    <input v-model="user.username"/></p>
                <p style="background-color: azure">
                    <label>同意协议(checkbox)：</label>
                    <input v-model="user.agree" type="checkbox"/>
                </p>
                <p style="background-color: azure">
                    <label>兴趣(多选框)：</label><br/>
                    <label><input v-model="user.hobby" type="checkbox" value="足球"/>足球</label>
                    <label><input v-model="user.hobby" type="checkbox" value="篮球"/>篮球</label>
                    <label><input v-model="user.hobby" type="checkbox" value="羽毛球"/>羽毛球</label>
                    <label><input v-model="user.hobby" type="checkbox" value="乒乓球"/>乒乓球</label>
                </p>
                <p style="background-color: azure">
                    <label>性别(单选框)：</label>
                    <label><input v-model="user.sex" type="radio" name="sex" value="男">男</label>
                    <label><input v-model="user.sex" type="radio" name="sex" value="女">女</label>
                </p>
                <p style="background-color: azure">
                    <label>学历(单选下拉列表)：</label>
                    <select v-model="user.degree">
                        <option disabled value="">选择学历</option>
                        <option>小学</option>
                        <option>初中</option>
                        <option>高中</option>
                    </select>
                </p>
                <p style="background-color: azure">
                    <label>课程(多选下拉列表)：</label>
                    <br/>
                    <select multiple v-model="user.course">
                        <option disabled value="">选择课程</option>
                        <option>语文</option>
                        <option>数学</option>
                        <option>科学</option>
                        <option>道法</option>
                    </select>
                </p>
            </form>
        </div>
        <div style="border: 1px solid blue;width: 200px">
            <h1>结果预览</h1>
            <p style="background-color: azure"><label>姓名：{{user.username}}</label></p>
            <p style="background-color: azure"><label>同意协议：{{user.agree ? "同意" :"不同意"}}</label>
            </p>
            <p style="background-color: azure">
                <label>兴趣：
                    <li v-for="item in user.hobby">
                        {{item}}
                    </li>
                </label>
            </p>
            <p style="background-color: azure">
                <label>性别：{{user.sex}} </label>
            </p>
            <p style="background-color: azure">
                <label>学历：{{user.degree}}</label>
            </p>
            <p style="background-color: azure">
                <label>课程：
                    <li v-for="c in user.course">{{c}}</li>
                </label>
            </p>
        </div>
    </div>
</template>

<style scoped>

</style>